<template>
  <div>
    <div class="boss">
      <div class="box" v-for="(v, i) in data" :key="i" @click="fun(v.id)">
        <img :src="v.img1" alt="" />
        <p>
          <span>{{ v.text1 }}</span
          ><span>{{ v.text2 }}</span>
        </p>
        <div class="text">{{ v.text3 | xiaoming }}</div>
        <div class="bottom">
          <div class="bottom-left">
            <img :src="v.img2" alt="" />
            <p>{{ v.p }}</p>
          </div>
          <div class="bottom-right">
            <img src="/find/16.png" alt="" />
            <p>{{ v.num }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun(id) {
      this.$router.push({path:'/getfind',query:{newsid:id}});
      // console.log(id)
      // this.$router.push('/getfind');
    },
  },
  data() {
    return {
      data: [],
    };
  },
   created() {
     this.$store.dispatch("getapi");
     this.data=this.$store.state.find.arr
      window.addEventListener("beforeunload", () => {
      localStorage.setItem("stateInfo", JSON.stringify(this.$store.state));
    });
    if (localStorage.getItem("stateInfo")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(localStorage.getItem("stateInfo"))
        )
      );
    }
   
  },
  filters: {
    xiaoming(data) {
      if (data.length >= 22) {
        return data.substr(0, 22) + "...";
      } else {
        return data;
      }
    },
  },
};
</script>

<style scoped>
.boss {
  /* width: 100%; */
  background-color: #f5f7f8;
  display: flex;
  flex-wrap: wrap;
  /* overflow-X: hidden; */
}
.box {
  width: 1.721rem;
  height: 1.9611rem;
  /* background-color: pink; */
  margin: auto;
  overflow-x: hidden;
}
.box img {
  width: 1.721rem;
  height: 0.968rem;
  display: flex;
  border-radius: 0.09rem 0.09rem 0 0;
}
.box p {
  width: 1.55rem;
  margin: auto;
  font-size: 0.1rem;
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  z-index: 555;
  margin-top: -0.2rem;
}
.box .text {
  font-size: 0.14rem;
  color: #1d2127;
  margin-top: 0.15rem;
  margin-left: 0.1rem;
}
.bottom {
  width: 1.55rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 0.22rem;
}
.bottom-left {
  width: 0.734rem;
  height: 0.28rem;
  /* background-color: orange; */
}
.bottom-left img {
  width: 0.16rem;
  height: 0.16rem;
  border-radius: 50%;
  margin-top: 0.04rem;
}
.bottom-left p {
  font-size: 0.1rem;
  color: #868c92;
  line-height: 0.28rem;
  margin-left: 0.2rem;
}
.bottom-right {
  width: 0.3994rem;
  height: 0.28rem;
  /* background-color: red; */
}
.bottom-right img {
  width: 0.16rem;
  height: 0.16rem;
  margin-top: 0.04rem;
}
.bottom-right p {
  color: #999;
  font-size: 0.12rem;
  line-height: 0.28rem;
  margin-left: 0.2rem;
}
</style>